import React, { useState } from 'react'
import style from './index.module.scss'
import { Avatar, Button, Empty } from 'antd'
import { localUrl } from '@/common/utils'
import UsePaginatedHook from '@/components/ComponentHook/UsePaginatedHook'
import { getSearchUserList, updateFans } from '@/common/api'
import { UserOutlined } from '@ant-design/icons'
import { getLs } from '@/common/common'
import { useNavigate } from 'react-router-dom'
export default function UserList({searchKey}) {
    const userInfo = getLs("userInfo")
    const {_id:id} = userInfo
    const {list,setList,endRef}=UsePaginatedHook(getSearchUserList,20,{searchKey,id})
    const [btnLoading,setBtnLoading]=useState(false)
    const navigate = useNavigate()
    // 关注
    const payAttention = async(item)=>{
        const timer = Math.floor(Date.now() / 1000)
        const data={
            otherId:item._id,
            userId:id,
            timer,
            type:item.isAttention
        }
        try {
            setBtnLoading(true)
            const RES = await updateFans(data)
            setBtnLoading(false)
            if(RES.code===200){
                const newList = list.map(ele=>{
                    if(ele._id===item._id){
                       return {...ele,isAttention:!item.isAttention}
                    }
                    return ele
                })
                setList(newList)
            }
        } catch (error) {
            return error
        }
    }
    const pushOtherDetail = (item)=>{
        const { _id: operatorId } = item
        if (id === operatorId) {
            navigate(`/information/markDown`)
        } else {
            navigate(`/userDetail?sign=${operatorId}`)
        }
        
      }
    return (
        <>
            {list.length!==0&&<ul className={style.userSearch}>
                {list.map((item,index)=>(
                    <li key={index} ref={list.length===index+1?endRef:null}>
                    <div className='left'>
                    {item.avator? <Avatar src={localUrl(item.avator)} />:<Avatar icon={<UserOutlined/>} />}
                        <div className='text'>
                            <h2 onClick={()=>pushOtherDetail(item)}>{item.name}</h2>
                            <p>纷享号: {item.username}</p>
                            <span>粉丝:{item.fansNumber} | </span><span>关注:{item.attentionNumber}</span>
                        </div>
                    </div>
                        <div className='right'>
                            {
                                
                            }
                        {item._id===id?'':item.isAttention?<Button onClick={()=>{payAttention(item)}}>已关注</Button>:<Button loading={btnLoading} onClick={()=>payAttention(item)} style={{backgroundColor:"#fd2c50",width:"80px",height:"30px"}} type='primary'>关注</Button>
                        }
                    </div>
                </li>
                ))}
            </ul>}
            {
                list.length===0&& <Empty description="暂无数据" image={Empty.PRESENTED_IMAGE_SIMPLE} />
            }
        </>
    )
}
